<template>
  <layout/>
</template>

<script setup lang="ts">
  import Layout from './layout/index.vue'
</script>

<style lang="scss">
  @import '@/assets/styles/theme';

  .el-drawer {
    background: $panel-background;
    border: $panel-border;
    border-image: $panel-border-image;
    color: $panel-color;
    box-shadow: $panel-box-shadow;
    backdrop-filter: $panel-backdrop-filter;

    .el-drawer__header {
      color: $panel-color;
    }
  }

  .el-table__body-wrapper tr td.el-table-fixed-column--left{
    background: #015555 !important;
  }

  .el-table.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell {
    background: #015555 !important;
  }

  .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(6, 175, 175, 0.2)
  }

  .el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid rgba(23, 156, 156, 0.6) !important;
  }

  .el-table {
    background: none !important;
    --el-table-border-color: rgba(23, 156, 156, 0.6) !important;

    .is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell {
      background: none !important;
    }

    tr {
      background-color: rgba(0, 63, 63, 0) !important;
      color: rgba(54, 215, 215, 1) !important;

      td {
        .el-table-fixed-column--left {
          background: none !important;;
        }
      }
    }

    .data-table-wrap .el-table th.is-leaf {
      background-color: rgba(6, 175, 175, 0.2) !important;
      color: rgba(54, 215, 215, 1) !important;
      border-bottom: 1px solid rgba(22, 198, 198, 0.6) !important;
    }

    th {
      .is-leaf {
        border-bottom: 1px solid rgba(23, 156, 156, 0.6) !important;
      }
    }

  }

  .el-pagination {
    --el-pagination-bg-color: $page-background;
    --el-pagination-hover-color: rgb(27, 241, 241);
    --el-pagination-button-disabled-color: rgb(1, 87, 87);
    --el-pagination-button-bg-color: rgb(3, 189, 189);
    --el-disabled-bg-color: rgb(2, 114, 114);
    --el-color-white: rgb(1, 62, 62);
    --el-text-color-regular: rgb(1, 161, 161);
    --el-color-primary: rgb(4, 229, 229);
  }

  .el-input {
    --el-input-placeholder-color: #1b9caa;

    .el-input__wrapper {
      background: transparent;
      box-shadow: none;
      border: 1px solid #1b9caa;

      .el-input__inner {
        color: $panel-color;
      }
    }
  }

  .el-select-v2__wrapper {
    background: none;
    border: 1px solid #1b9caa;

    .el-select-v2__placeholder {
      color: $panel-color;
    }
  }


  .el-popper.is-light {
    background: $select-background !important;
    border: 1px solid $table-border-color !important;
  }

  .el-select-dropdown__option-item {
    color: $select-color;
  }

  .el-select-dropdown__option-item.is-selected {
    color: $select-color-selected !important;
    background: $select-background-selected !important;
  }

  .el-popper.is-light .el-popper__arrow::before {
    background: rgba(0, 63, 63, .8);
  }
 
  

  .el-select-dropdown__item.selected {
    color: $select-color-selected;
  }

  .el-select-dropdown__item {
    color: $select-color;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: $select-background-selected !important;
  }

  .el-select-dropdown__option-item.hover {
    background: $select-background-selected !important;
  }

  .custom-form {

    .el-form-item {
      width: 100%;

      .el-form-item__label {
        color: $panel-color;
      }

      .el-input {
        --el-input-placeholder-color: #1b9caa;

        .el-input__wrapper {
          background: transparent;
          box-shadow: none;
          border: 1px solid #1b9caa;

          .el-input__inner {
            color: $panel-color;
          }
        }
      }

      .el-select-v2__wrapper {
        background: none;
        border: 1px solid #1b9caa;

        .el-select-v2__placeholder {
          color: $panel-color;
        }
      }

    }
  }

  .el-dropdown-menu {
    background: $panel-background;

    .el-dropdown-menu__item {
      color: $panel-color;

      &:not(.is-disabled):focus {
        background: rgba(2, 119, 132, 0.62);
        color: $panel-color;
      }
    }
  }

  .el-tree {
    background: $panel-background !important;
    --el-tree-node-hover-bg-color: rgba(2, 119, 132, 0.62) !important;

    .el-tree-node__content:hover {
      background: rgba(2, 119, 132, 0.62) !important;;
    }

    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background: none !important;
    }
  }

  .el-table__body-wrapper::-webkit-scrollbar {
    width: 17px; /*滚动条宽度*/
    height: 17px; /*滚动条高度*/
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {
    /*border-radius: 0px; !*滚动条的背景区域的圆角*!*/
    /*background-color: white; !*滚动条的背景颜色*!*/
    color: transparent; /*滚动条的背景设置为透明*/
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: $table-background;
  }

  ::-webkit-scrollbar-thumb{
    background-color: #fba7a733;
  }
</style>
